<template>
    <div>
        <div class="announcement-top-layout">
            <div class="main">
                <!-- <div class="gsname">简单竟戈网络科技有限公司</div> -->
                <!-- logo begin-->
                <a class="a-logo" title="简单约玩" href="#"></a>
                <!-- logo end-->

                <!-- menu begin -->
                <ul class="a-menu">
                    <router-link tag="li" :to="{path:'/'}"><a>首页</a></router-link>
                    <!-- <div class="router-div">
                        <router-link tag="li" :to="{path:'/disputeHandling'}"><a title="纠纷处理">纠纷处理</a></router-link>
                    </div>
                    <div class="router-div">
                        <router-link tag="li" :to="{path:'/tutelage'}"><a title="家长监护">家长监护</a></router-link>
                    </div>
                    <div class="router-div">
                        <router-link tag="li" :to="{path:'/about'}"><a title="关于我们">关于我们</a></router-link>
                    </div> -->
                    <div class="router-div" @click="headTit(1)">
                        <router-link tag="li" :to="{path:'/playAroundWith',query:{type:1}}" :class="[tabIndex == 1 ? 'active' : '']"><a title="约陪玩">约陪玩</a></router-link>
                    </div>
                    <div class="router-div" @click="headTit(2)">
                        <li :class="[tabIndex == 2 ? 'active' : '']"><a title="充值">充值</a></li>
                    </div>
                    <router-link tag="li" :to="{path:'/download'}"><a title="APP下载">APP下载</a></router-link>
                    <div class="router-div" @click="headTit(4)">
                        <li :class="[tabIndex == 4 ? 'active' : '']"><a title="申请入驻">申请入驻</a></li>
                    </div>
                    
                </ul>
                <!-- menu end -->

                <!-- search begin -->
                <div class="search-layout">
                    <input class="search-input" type="text" v-model="searchVal" placeholder="搜索昵称/UID/靓号" @keyup.enter="search()">
                </div>
                <!-- search end -->

                <!-- feature-group  begin -->
                <ul class="feature-group">
                    <li><a class="message-iconD" @click="messageLink()">消息</a></li>
                    <li><a class="a-user-iconD" v-if="detailNull == false" @click="islogin = true">登录/注册</a></li>
                    <li v-if="detailNull">
                        <div class="a-user-icon-ed">
                            <img :src="$imgPath(detailObj.headImg)">
                            <i></i>

                            <!-- userInfo begin -->
                            <div class="userInfo">
                                <div class="userInfo-msg">
                                    <div class="userInfo-img">
                                        <img :src="$imgPath(detailObj.headImg)">
                                        <span class="loginOut" @click="loginOut()">退出</span>
                                    </div>
                                    <div class="userInfo-name">
                                        <span>{{detailObj.nickname}}</span>
                                        <i class="she" v-if="detailObj.sex == 2">{{detailObj.age}}</i>
                                        <i class="nan" v-else-if="detailObj.sex == 1">{{detailObj.age}}</i>
                                        <label>
                                            UID:{{detailObj.code}}
                                            <!-- <i></i> -->
                                        </label>
                                    </div>
                                    <div class="userInfo-VIP">
                                        <!-- <label class="VIP">VIP2</label>
                                        <label class="LV">LV12</label> -->
                                        <label class="approve">{{detailObj.validIdentity ? '已认证' : '未认证'}}</label>
                                        <label class="bound">{{detailObj.phone ? '已绑定' : '未绑定'}}</label>
                                    </div>
                                    <!-- <div class="userInfo-EXP">
                                        <div class="userInfo-EXP-layout">
                                            <div class="userInfo-EXP-now">
                                                VIP2
                                            </div>

                                            <div class="userInfo-EXP-plan">
                                                <div class="userInfo-EXP-plan-num" style=" width: 45%;"></div>
                                                <div class="userInfo-EXP-plan-node" style=" left: 40%;"></div>
                                                <div class="userInfo-EXP-plan-value">
                                                    450/1000
                                                </div>
                                            </div>

                                            <div class="userInfo-EXP-future">
                                                VIP3
                                            </div>
                                        </div>

                                        <div class="userInfo-EXP-layout">
                                            <div class="userInfo-EXP-now">
                                                LV2
                                            </div>

                                            <div class="userInfo-EXP-plan">
                                                <div class="userInfo-EXP-plan-num" style=" width: 45%;"></div>
                                                <div class="userInfo-EXP-plan-node" style=" left: 40%;"></div>
                                                <div class="userInfo-EXP-plan-value">
                                                    450/1000
                                                </div>
                                            </div>

                                            <div class="userInfo-EXP-future">
                                                LV3
                                            </div>
                                        </div>
                                    </div> -->
                                </div>

                                <div class="Wallet-layout">
                                    <div class="Wallet">
                                        <div class="Wallet-title">
                                            我的钱包
                                        </div>
                                        <div class="Wallet-msg">
                                            <label class="balance">余额：￥{{moneyObj.recharge}}元</label>
                                            <label class="diamond">钻石：{{moneyObj.credits}}</label>
                                            <label class="recharge">
                                                <router-link tag="a" :to="{path:'/topUp',query:{type:2,tabIndex:0}}">充值</router-link>                                              
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="user-operation">
                                    <ul>
                                        <li class="personal-center">
                                            <a>
                                                <router-link tag="label" :to="{name:'center',query:{leftIndex:2}}">个人中心</router-link>
                                            </a>
                                        </li>
                                        <li class="order-management">
                                            <a>
                                                <router-link tag="label" :to="{name:'center',query:{leftIndex:0}}">订单管理</router-link>
                                            </a>
                                        </li>
                                        <li class="setfamily">
                                            <a>
                                                <router-link tag="label" :to="{name:'center',query:{leftIndex:7}}">设置资料</router-link>
                                            </a>
                                        </li>
                                        <li class="pupil-sitter">
                                            <a>
                                                <router-link tag="label" :to="{name:'applyForService',query:{type:4}}">申请陪玩师</router-link>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <!-- userInfo end -->
                        </div>
                    </li>
                </ul>
                <!-- feature-group  end -->
            </div>
        </div>
        <login :login="islogin" @colseValue="colseValue"></login>
    </div>
</template>
<script>
import apiHttp from '../../api/index.js'
import login from '@/components/login'
export default {
    data(){
        return{
            islogin:false,      // 是否显示登录框
            searchVal:this.$route.query.name,       // 搜索的内容
            tabIndex:this.$route.query.type ? this.$route.query.type : '',
            detailObj:{},       // 个人信息
            moneyObj:{},        // 钱包明细
            detailNull:false,   // 判断个人信息是否为空
            isLog:false,        // 判断是否登录
        }
    },
    components:{
        login
    },
    mounted(){
        this.verify()
    },
    methods:{
        headTit(type){
            if(type == 2 || type == 4){
                if(!this.isLog){
                    this.$Message.error('请您先登录')
                    this.islogin = !this.islogin
                }else{
                    if(type == 2){
                        this.$router.push({
                            name:'topUp',
                            query:{
                                type:2,
                                tabIndex:0
                            }
                        })
                    }else if(type == 4){
                        this.$router.push({
                            name:'applyForService',
                            query:{
                                type:4
                            }
                        })
                    }
                }
            }
        },
        // 关闭登陆窗口
        colseValue(value){
            this.islogin  = value
        },
        // 搜索
        search(){
            if(this.searchVal != ''){
                let routeData = this.$router.resolve({
                    path: '/search',
                    query:{
                        name:this.searchVal
                    }
                })
                window.open(routeData.href, '_blank')
            }
        },
        // 判断token是否有效
        verify(){
            apiHttp.apiLogin.verify('',resp=>{
                if(resp.code == 200){
                    if(resp.data == 1){
                        this.screening()
                        this.getUserWalletDetail()
                        this.isLog = true
                    }else{
                        localStorage.removeItem('token')
                    }
                }
            })
        },
        // 获取个人资料
        screening(){
            apiHttp.apiCenter.detail('',resp => {
                this.detailObj = resp
                this.detailNull = true
            })
        },
        // 钱包详情
        getUserWalletDetail(){
            apiHttp.apiCenter.getUserWalletDetail('',resp=>{
                if(resp.code == 200){
                    this.moneyObj = resp.data
                }
            })
        },
        // 退出登陆
        loginOut(){
            apiHttp.apiCenter.logout('',resp=>{
                if(resp.code == 200){
                    localStorage.removeItem('token')
                    this.detailObj = {}
                    this.detailNull = false
                    if(this.$route.path == '/applyForService' || this.$route.path == '/topUp'){
                        this.$router.push({
                            name:'index'
                        })
                    }
                    this.$Message.success('退出登陆成功')
                }
            })
        },
        // 消息跳转
        messageLink(){
            if(this.isLog){
                this.$router.push({
                    name:'center',
                    query:{
                        leftIndex:'6'
                    }
                })
            }else{
                this.islogin = true
                this.$Message.error('请您先登录')
            }
        }
    }
}
</script>
<style scoped>
input::-webkit-input-placeholder {
    font-size: 14px;
}
.router-div{
    display: inline-block;
    float: left;
}
</style>
